<template>
  <div>
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="编号">
      <el-input v-model="queryInfo.usermarkId" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="getUserMarkList">搜索</el-button>
    </el-form-item>
  </el-form>
  <div>
    <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column fixed prop="usermarkId" label="编号" width="80" />
    <el-table-column prop="usermarkMarktext" label="评论内容" />
    <el-table-column prop="usermarkMarkstar" label="评价等级" width="170">
        <template #default="scope">
            <el-rate
            v-model="scope.row.usermarkMarkstar"
            disabled
            show-score
            text-color="#ff9900"
        />
        </template>
    </el-table-column>
    <el-table-column prop="usermarkCreatetime" label="评价时间" width="100"/>
    
    <el-table-column prop="usermarkConsultId" label="咨询师" width="120">
        <template #default="scope">
            {{ consultants[scope.row.usermarkConsultId] }}
        </template>
    </el-table-column>

    <el-table-column prop="usermarkUserId" label="用户" >
        <template #default="scope">
            {{ users[scope.row.usermarkUserId] }}
        </template>
    </el-table-column>

    <el-table-column prop="usermarkAppId" label="咨询预约" >
        <template #default="scope">
            {{ appointments[scope.row.usermarkAppId] }}
        </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          修改 
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row.markId)">
          删除
        </el-button>
      </template>
      </el-table-column>
  </el-table>
</div>
  <!-- 分页 -->
  <el-pagination
      v-model:current-page="queryInfo.pageNum"
      v-model:page-size="queryInfo.pageSize"
      :page-sizes="[1, 5, 10, 20]"
      :size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  <!-- 添加修改 对话框 -->
  <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
    <el-form :model="UserMark">
      <el-form-item label="评价内容" :label-width="formLabelWidth">
        <el-input v-model="UserMark.usermarkMarktext" autocomplete="off" />
      </el-form-item>
      <el-form-item label="评价等级" :label-width="formLabelWidth">
            <template #default="scope">
                <el-rate v-model="UserMark.usermarkMarkstar" />
            </template>
      </el-form-item>
      <el-form-item label="评价时间" :label-width="formLabelWidth">
        <el-input v-model="UserMark.usermarkCreatetime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="咨询师" :label-width="formLabelWidth">
          <template #default="scope">
              <el-select v-model="UserMark.usermarkConsultId" placeholder="请选择">
                  <el-option v-for="(item, index) in consultants" :key="item" :label="item" :value="index"
                      v-show="item!= null">
                  </el-option>
              </el-select>
          </template>
      </el-form-item>
      <el-form-item label="用户" :label-width="formLabelWidth">
        <template #default="scope">
              <el-select v-model="UserMark.usermarkUserId" placeholder="请选择">
                  <el-option v-for="(item, index) in users" :key="item" :label="item" :value="index"
                      v-show="item!= null">
                  </el-option>
              </el-select>
          </template>
      </el-form-item>
      <el-form-item label="咨询预约" :label-width="formLabelWidth">
          <template #default="scope">   
              <el-select v-model="UserMark.usermarkAppId" placeholder="请选择">
                  <el-option v-for="(item, index) in appointments" :key="item" :label="item" :value="index"
                      v-show="item!= null">
                  </el-option>
              </el-select>
          </template> 
      </el-form-item>
    </el-form>
    <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">修改</el-button>                <el-button type="primary" @click="saveOrUpdate">
                    {{ saveOrUpdateTitle }}
                </el-button>
                <el-button @click="close">取消</el-button>
            </div>
        </template>
  </el-dialog>
</template>

<script setup>
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
const saveOrUpdateVisible = ref(false)
const saveOrUpdateTitle = ref('添加')
const tableData = ref([])
const total = ref()
const formLabelWidth = ref('100px');
const UserMark = ref({
  usermarkMarktext: '',
  usermarkMarkstar: '',
  usermarkCreatetime: '',
  usermarkConsultId: '',
  usermarkUserId: '',
  usermarkAppId: ''
});
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    usermarkId: '',
    usermarkMarktext: '',
    usermarkMarkstar: '',
    usermarkCreatetime: '',
    usermarkConsultId: '',
    usermarkUserId: '',
    usermarkAppId: ''
})
onMounted(()=>{
    getUserMarkList();
    getUsers();
    getconsultants();
    getAppointments();
})
// 查询内容列表
const getUserMarkList = () => {
    // 使用axios调用后端接口获取数据
    axios.get('/usermark/findAll', { params: queryInfo.value })
    .then(resp => {
        console.log(resp.data)
        let result = resp.data;
        total.value = result.data.total
        if (result.code == 1) {
          tableData.value = result.data.list
        } else {
          console.log('获取列表失败')
        }
      })
}

let consultants=ref([])
const getconsultants = () => {
    axios.get('/consultants/selectAll')
        .then(resp => {
            let result = resp.data;
            console.log(result.data.list)
            if (result.code == 1) {
                for (let i = 0; i < result.data.list.length; i++) {
                    consultants.value[result.data.list[i].consultantId] = result.data.list[i].username
                }
                console.log(consultants.value)
            } else {
                console.log('获取咨询师列表失败')
            }
        })
}
const users=ref([])
const getUsers = () => {
    axios.get('/user/findByPage')
        .then(resp => {
            let result = resp.data;
            console.log(result.data.list)
            if (result.code == 1) {
                for (let i = 0; i < result.data.list.length; i++) {
                    users.value[result.data.list[i].userId] = result.data.list[i].userNickName
                }
                console.log(users.value)
            } else {
                console.log('获取用户列表失败')
            }
        })
}
const appointments=ref([])
const getAppointments = () => {
    axios.get('/appointment/findByPage')
       .then(resp => {
            let result = resp.data;
            console.log(result.data.list)
            if (result.code == 1) {
                for (let i = 0; i < result.data.list.length; i++) {
                    appointments.value[result.data.list[i].id] = result.data.list[i].content 
                }
                console.log(appointments.value)
            } else {
                console.log('获取咨询列表失败') 
            } 
       }) 
}

// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize;
  getUserMarkList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
  queryInfo.value.pageNum = pageNum;
  getUserMarkList();
}
// 保存或更新
const saveOrUpdate = () => {
  if (saveOrUpdateTitle.value == '添加') {
    // 调用后端接口添加
    axios.post('/usermark/insert',UserMark.value)
      .then(resp => {
        let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
        if (result.code == 1) {
          // 重新获取列表
          getUserMarkList();
          ElMessage.success('添加成功')
        } else {
          ElMessage.warning('添加失败')
        }
      })
  } else {
    // 调用后端接口修改
    axios.put('/usermark/update', UserMark.value)
      .then(resp => {
        let result = resp.data;  // resp是promise对象，.data返回我们自己的标准R
        if (result.code == 1) {
          // 重新获取列表
          getUserMarkList();
          ElMessage.success('修改成功')
        } else {
          ElMessage.warning('修改失败')
        }
      });
  }
  
  // 关闭弹框
  saveOrUpdateVisible.value = false;
  UserMark.value = { 
    usermarkMarktext: '',
  usermarkMarkstar: '',
  usermarkCreatetime: '',
  usermarkConsultId: '',
  usermarkUserId: '',
  usermarkAppId: ''
  };
}
  // 修改
  const handleEdit = (row) => {
    
    saveOrUpdateTitle.value = '修改'
    saveOrUpdateVisible.value = true
    UserMark.value = row
  }
  // 新增
const toAdd = () => {
    saveOrUpdateTitle.value = '添加'
    saveOrUpdateVisible.value = true
    UserMark.value = { 
      usermarkMarktext: '',
  usermarkMarkstar: '',
  usermarkCreatetime: '',
  usermarkConsultId: '',
  usermarkUserId: '',
  usermarkAppId: ''
  };
}
  // 取消修改或保存
const close = () => {
  saveOrUpdateVisible.value = false;
  UserMark.value = { 
    usermarkMarktext: '',
  usermarkMarkstar: '',
  usermarkCreatetime: '',
  usermarkConsultId: '',
  usermarkUserId: '',
  usermarkAppId: ''
  };
}
  

 
  // 删除
const handleDelete = (markId) => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            axios.delete('/usermark/deleteById', {
                params: { id: markId }
            })
                .then(resp => {
                    let result = resp.data;
                    if (result.code == 1) {
                        getUserMarkList();
                        ElMessage({
                            message: '删除成功！',
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: '删除失败！',
                        })
                    }
                })
        })
}

</script>

  <style scoped>
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>